<template>
	<view class="page">
		<!-- 医生信息 -->
		<view class="doctorInfo">
			<image style="width: 90rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u809.png" mode="widthFix"></image>
			<view class="textInfo">
				<view class="name_call">
					<view class="name">
						刘医生
					</view>
					<view class="call">
						主任医师
					</view>
				</view>
				<view class="depart_campus">
					<view class="depart">
						门诊外一科
					</view>
					<view class="campus">
						四川省保健院南苑
					</view>
				</view>
			</view>
		</view>
		<!-- 候诊信息 -->
		<view class="wattingInfo">
			<view class="wait_status" style="background-color: rgba(255, 251, 230, 1);color: #FAAD14;">
				<view class="wait_text">
					当前接诊号
				</view>
				<view class="wait_code">
					15
				</view>
			</view>
			<view class="wait_status" style="background-color:rgba(230, 244, 255, 1);color: #1677FF;">
				<view class="wait_text">
					我的排队号
				</view>
				<view class="wait_code">
					20
				</view>
			</view>
			<view class="wait_status" style="background-color: rgba(255, 241, 240, 1);color: #FF4D4F;">
				<view class="wait_text">
					等待人数
				</view>
				<view class="wait_code">
					5
				</view>
			</view>
		</view>
		<!-- 刷新队列 -->
		<view class="Refresh_queue">
			<view class="queue" @click="refresh">
				刷新队列
			</view>
			<view class="note">
				注：如有特殊情况，请以现场排队情况为准
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0"></uni-popup>
	</view>
</template>

<script setup>
import { ref } from 'vue';

	// 刷新队列
	const popup = ref(null)
	const refresh = () => {
		popup.value.open()
		uni.showLoading({
		    title: '正在刷新中...',
			duration: 500,
		});
		setTimeout(()=>{
			popup.value.close()
			uni.hideLoading();
			uni.showToast({
				title: '即将到诊，请等待医生叫号，请勿离开哦：' ,
				icon: 'none',
				position:'top',
			})
		},2000)
	}
</script>

<style lang="scss" scoped>
	.page{
		padding: 44rpx 40rpx;
		box-sizing: border-box;
		background-color: #fff;
		.doctorInfo{
			display: flex;
			align-items: center;
			.textInfo{
				font-family: 'Microsoft YaHei UI', sans-serif;
				color: #1F1F1F;
				font-size: 28rpx;
				margin-left: 40rpx;
				.name_call{
					height: 40rpx;
					display: flex;
					align-items: baseline;
					.name{
						font-size: 36rpx;
						font-weight: 700;
						color: #000;
					}
					.call{
						font-size: 26rpx;
						margin-left: 26rpx;
					}
				}
				.depart_campus{
					display: flex;
					height: 40rpx;
					align-items: center;
					margin-top: 4rpx;
					.campus{
						margin-left: 28rpx;
					}
				}
			}
		}
		// 候诊信息
		.wattingInfo{
			width: 100%;
			height: 142rpx;
			background-color: #fff;
			border-radius: 16rpx;
			overflow: hidden;
			display: flex;
			margin-top: 60rpx;
			.wait_status{
				width: calc(100%/3);
				height: 142rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				.wait_code{
					font-size: 40rpx;
					margin-top: 18rpx;
					// font-weight: 700;
				}
			}
		}
		// 刷新队列
		.Refresh_queue{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			top: 50%;
			left: 0;
			right: 0;
			transform: translateY(-50%);
			.queue{
				width: 200rpx;
				height: 200rpx;
				line-height: 200rpx;
				text-align: center;
				background-color: #1677ff;
				border-radius: 50%;
				font-family: 'ArialMT', 'Arial', sans-serif;
				font-size: 28rpx;
				color: #fff;
			}
			.note{
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 24rpx;
				color: #AAAAAA;
				margin-top: 70rpx;
			}
		}
	}       
</style>
